<template>
  <div class="singer">
   <div class="singer-wrapper">
     <ScrollView ref="scrollView" class="scrollView">
       <ul class="list-wrapper">
         <li class="list-group" v-for="(value,index) in list" :key="index" ref="group">
           <h2 class="group-title">{{keys[index]}}</h2>
           <ul>
             <li class="group-item" v-for="(item,itemIndex) in value" :key="item.id" @click.stop="switchSinger(item.id)">
               <div class="item-left">
                 <span>{{itemIndex + 1}}</span>
                 <img v-lazy="item.picUrl" alt="">
               </div>
               <div class="item-right">
                 <h2>{{item.name}} <span class="EnglishName" v-if="item.alias[0]"> ( {{item.alias[0]}} ) </span></h2>
                 <div>
                   <p>专辑 : <span>{{item.albumSize}}</span></p>
                   <p>单曲 : <span>{{item.musicSize}}</span></p>
                 </div>
               </div>
             </li>
           </ul>
         </li>
         <li class="footer-text">- 我也是有底线的 -</li>
       </ul>
     </ScrollView>
     <ul class="list-keys">
       <li v-for="(key,index) in keys"
           :key="key"
           :data-index="index"
           @touchstart.stop.prevent="touchstart"
           @touchmove.stop.prevent="touchmove"
           @touchend.stop.prevent="touchend"
           :class="{'active' : currentActive === index}">{{key}}</li>
     </ul>
     <div class="fixTitle" v-show="fixTitle !== ''" ref="fixTitle">{{fixTitle}}</div>
     <div class="backBox" v-show="backBoxText !== ''">{{backBoxText}}</div>
   </div>
    <!--    添加动画-->
    <transition name="fade">
      <router-view ></router-view>
    </transition>
  </div>
</template>

<script>
import {getAllArtists} from "../api/index"
import ScrollView from "../components/ScrollView";
import MetaInfo from '../../vue.meta.info'


export default {
  name: "Singer",
  metaInfo:MetaInfo.singer,

  components:{
    ScrollView
  },
  async created() {
    const allArtists = await getAllArtists()
    this.keys = allArtists.keys
    this.list = allArtists.list
    // console.log(allArtists);
  },
  data() {
    return {
      keys: [],
      list: [],
      //每一组距离顶部的高度
      groupTop:[],
      currentActive:0,
      beginOffsetY:0,
      moveOffsetY:0,
      scrollY:0,
      backBoxText:'',
      fixTitleHeight:0
    }
  },
  methods:{
    clickGoTo(index){
      // console.log(this.groupTop[index]);
      this.currentActive = index;
      //减去15个像素, 用于解决点击之后标识不对的bug
      this.$refs.scrollView.scrollTo(0,(-this.groupTop[index] - 15),300);
    },
    touchstart(e){
      let index = parseInt(e.target.dataset.index);
      this.clickGoTo(index)
      this.beginOffsetY = e.touches[0].pageY
      this.backBoxText = this.keys[this.currentActive];
    },
    touchmove(e){
      this.moveOffsetY = e.touches[0].pageY
      let offsetY = (this.moveOffsetY - this.beginOffsetY) / e.target.offsetHeight
      let index = parseInt(e.target.dataset.index) + Math.floor(offsetY)
      if(index < 0){
        index = 0
      }else if(index > this.keys.length -1){
        index = this.keys.length - 1
      }
      this.clickGoTo(index)
      this.backBoxText = this.keys[this.currentActive];
    },
    touchend(){
      setTimeout(()=>{
        this.backBoxText = ''
      },500)
    },
    switchSinger(id){
      this.$router.push(`singer/detail/${id}/singer`)
      // console.log(1);
    }
  },
  computed:{
    fixTitle(){
      if(this.scrollY >=0){
        return ''
      }else{
        return this.keys[this.currentActive]
      }
    },

  },
  mounted() {
    this.$refs.scrollView.scrolling((y)=>{
      // console.log(Math.floor(y));
      this.scrollY = y
      //处理第一个区域
      if(y >= 0){
        this.currentActive = 0
        return
      }
      //处理字母区域
      for(let i = 0; i < this.groupTop.length - 1;i++){
       let preTop = this.groupTop[i]
       let nextTop = this.groupTop[i +1]
        if(-y >= preTop && -y <= nextTop){
          this.currentActive = i

          //分组滚动出去的效果
          //1. 用下一组的标题的偏移位 + 当前滚动出去的偏移位
          let diffOffsetY = nextTop + y
          let fixTitleOffsetY = 0;
          //2. 判断计算的结果是否是 0 ~ 分组标题高度的值
          if(diffOffsetY >= 0 && diffOffsetY <= this.fixTitleHeight){
            fixTitleOffsetY = diffOffsetY - this.fixTitleHeight
          }else{
            fixTitleOffsetY = 0
          }
          //如果当前值等于上一次的值, 就不用修改
          if(fixTitleOffsetY === this.fixTitleOffsetY){
            return
          }
          this.fixTitleOffsetY = fixTitleOffsetY
          //修改
          this.$refs.fixTitle.style.transform = `translateY(${fixTitleOffsetY}px)`
          return
        }
      }
      //处理最后的区域
      this.currentActive = this.groupTop.length -1
    })
  },
  watch:{
    list(){
      /*
      watch 只能监听数据的变化, 但是数据变化的时候 不一定渲染完成了
      所以为了保证渲染完成, 可以借助 $nextTick 来获取
      因为 $nextTick 的回调函数只有数据渲染完成之后才会执行
      */
      this.$nextTick(()=>{
        this.$refs.group.forEach((item)=>{
          this.groupTop.push(item.offsetTop)
        })
        // console.log(this.groupTop);
      })
    },
    fixTitle(){
      this.$nextTick(()=>{
        this.fixTitleHeight = this.$refs.fixTitle.offsetHeight
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import "../assets/css/mixin";
@import "../assets/css/variable";

.singer {
  width: 100%;
  height: 100%;
  .singer-wrapper{
    position: fixed;
    top: 184px;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    @include bg_sub_color();
    .scrollView{
      transition: all 1s;
    }
    .list-wrapper{
      width: 100%;
      //height: 100%;
      .list-group{
        .group-title{
          @include bg_color();
          @include font_size($font_large);
          color: #fff;
          padding: 10px 35px ;
          box-sizing: border-box;
        }
        .group-item{
          display: flex;
          align-items: center ;
          margin: 20px ;
          &:nth-child(-n+3){
            .item-left{
              span{
                @include font_active_color();
                font-weight: bolder;
              }
            }
          }
          .item-left{
            display: flex;
            align-items: center;
            span{
              @include font_size($font_large);
              @include font_color();
              display: inline-block;
              text-align: center;
              width: 50px;
            }
            img{
              width: 100px;
              height: 100px;
              border-radius: 20px;
              margin:0 20px;
            }
          }
          .item-right{
            height: 100px;
            @include font_color();
            display: flex;
            justify-content: space-around;
            flex-direction: column;
            h2{
              @include font_size($font_medium);
              @include no-wrap();
              padding: 0 20px;
              .EnglishName{
                @include font_size($font_medium_s);
                margin-left: 20px;
                color: #999
              }
            }
            div{
              display: flex;
              @include font_size($font_medium_s);
              p:nth-child(1){
                margin-right: 30px;
              }
              p{
                @include bg_gray_color();
                padding: 5px 20px;
                border-radius: 30px;
              }
            }
          }
        }
      }
    }
    .list-keys{
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      padding: 10px;
      background: red;
      border-radius: 30px;
      @include bg_sub_color();
      border: 1px solid #fff;
      @include border_color();
      li{
        @include font_color();
        @include font_size($font_medium);
        text-align: center;
        margin: 5px 0;
        opacity: 0.5;
        &.active{
          border-radius: 50%;
          @include bg_sub_color();
          @include font_active_color();
          @include font_size($font_large);
          opacity: 1;
        }
      }
    }
    .fixTitle{
      width: 100%;
      padding: 10px 35px ;
      position: absolute;
      top: -1px;
      left: 0;
      right: 0;
      color: #ffffff;
      @include bg_color();
      @include font_size($font_large);
    }
    .backBox{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      width: 200px;
      height: 200px;
      border-radius: 40px;
      background: rgba(0,0,0,0.5);
      font-size: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
    }
  }
  .fade-enter {
    transform: translateX(100%);
  }
  .fade-enter-to {
    transform: translateX(0%);
  }
  .fade-enter-active {
    transition: transform 0.5s;
  }
  .fade-leave {
    transform: translateX(0%);
  }
  .fade-leave-to {
    transform: translateX(100%);
  }
  .fade-leave-active {
    transition: transform 0.5s;
  }
}
</style>
